<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEXUS | 未来科技门户</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #00f7ff;
            --secondary-color: #ff00aa;
            --dark-bg: #0a0e17;
            --card-bg: rgba(16, 21, 36, 0.8);
            --text-light: #e0e6f0;
            --accent-color: #00a8ff;
            --neon-glow: 0 0 10px rgba(0, 247, 255, 0.8);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--dark-bg);
            font-family: 'Roboto', sans-serif;
            color: var(--text-light);
            overflow-x: hidden;
            line-height: 1.6;
        }

        h1, h2, h3, h4, .nav-links, .btn {
            font-family: 'Orbitron', sans-serif;
            letter-spacing: 1px;
        }

        /* 粒子背景 */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }

        /* 导航栏 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 5%;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
            background-color: rgba(10, 14, 23, 0.9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 247, 255, 0.1);
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo h1 {
            font-size: 28px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-left: 10px;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--neon-glow);
        }

        .logo-icon svg {
            width: 24px;
            height: 24px;
            color: white;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 40px;
            position: relative;
        }

        .nav-links a {
            color: var(--text-light);
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .btn {
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
        }

        .btn-primary {
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            color: var(--dark-bg);
            border: none;
            box-shadow: 0 0 15px rgba(0, 247, 255, 0.5);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 20px rgba(0, 247, 255, 0.8);
        }

        .btn-secondary {
            background: transparent;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
        }

        .btn-secondary:hover {
            background: rgba(0, 247, 255, 0.1);
        }

        /* 英雄区域 */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 5%;
            margin-top: -90px;
        }

        .hero-content {
            max-width: 600px;
        }

        .hero h2 {
            font-size: 18px;
            color: var(--primary-color);
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .hero h1 {
            font-size: 60px;
            margin-bottom: 25px;
            line-height: 1.2;
            background: linear-gradient(90deg, #ffffff, #c2c2c2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p {
            font-size: 18px;
            margin-bottom: 40px;
            opacity: 0.9;
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
        }

        .hero-image {
            position: absolute;
            right: 5%;
            width: 50%;
            max-width: 700px;
            animation: float 6s ease-in-out infinite;
        }

        /* 特性部分 */
        .features {
            padding: 120px 5%;
            background-color: rgba(0, 10, 20, 0.5);
            position: relative;
        }

        .section-header {
            text-align: center;
            margin-bottom: 80px;
        }

        .section-header h2 {
            font-size: 40px;
            margin-bottom: 20px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .section-header p {
            max-width: 700px;
            margin: 0 auto;
            font-size: 18px;
            opacity: 0.8;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .feature-card {
            background-color: var(--card-bg);
            border-radius: 15px;
            padding: 40px 30px;
            transition: all 0.5s;
            border: 1px solid rgba(0, 247, 255, 0.1);
            position: relative;
            overflow: hidden;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            border-color: rgba(0, 247, 255, 0.3);
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            background-color: rgba(0, 247, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }

        .feature-icon svg {
            width: 30px;
            height: 30px;
            color: var(--primary-color);
        }

        .feature-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
        }

        .feature-card p {
            opacity: 0.8;
            font-size: 16px;
        }

        /* 数据展示 */
        .stats {
            padding: 100px 5%;
            background: linear-gradient(135deg, rgba(0, 10, 20, 0.7), rgba(10, 14, 23, 0.9));
            position: relative;
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 60px;
            font-weight: 700;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
            font-family: 'Orbitron', sans-serif;
        }

        .stat-label {
            font-size: 18px;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* CTA部分 */
        .cta {
            padding: 150px 5%;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(0, 247, 255, 0.1) 0%, transparent 70%);
            z-index: -1;
        }

        .cta h2 {
            font-size: 42px;
            margin-bottom: 30px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cta p {
            max-width: 700px;
            margin: 0 auto 50px;
            font-size: 18px;
            opacity: 0.9;
        }

        /* 页脚 */
        footer {
            background-color: #070b15;
            padding: 80px 5% 40px;
            border-top: 1px solid rgba(0, 247, 255, 0.1);
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 50px;
            max-width: 1200px;
            margin: 0 auto 60px;
        }

        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 25px;
            color: var(--primary-color);
            font-family: 'Orbitron', sans-serif;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 15px;
        }

        .footer-links a {
            color: var(--text-light);
            text-decoration: none;
            opacity: 0.8;
            transition: all 0.3s;
        }

        .footer-links a:hover {
            opacity: 1;
            color: var(--primary-color);
            padding-left: 5px;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 14px;
            opacity: 0.6;
        }

        .social-links {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .social-links a:hover {
            background-color: var(--primary-color);
            transform: translateY(-3px);
            box-shadow: var(--neon-glow);
        }

        .social-links svg {
            width: 18px;
            height: 18px;
            color: white;
        }

        /* 动画效果 */
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .hero h1 {
                font-size: 48px;
            }

            .hero-image {
                width: 45%;
            }
        }

        @media (max-width: 768px) {
            .hero {
                flex-direction: column;
                text-align: center;
                padding-top: 150px;
            }

            .hero-content {
                margin-bottom: 60px;
            }

            .hero-buttons {
                justify-content: center;
            }

            .hero-image {
                position: relative;
                right: auto;
                width: 80%;
                margin: 0 auto;
            }

            .nav-links {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .hero h1 {
                font-size: 36px;
            }

            .hero h2 {
                font-size: 16px;
            }

            .hero p {
                font-size: 16px;
            }

            .hero-buttons {
                flex-direction: column;
                gap: 15px;
            }

            .btn {
                width: 100%;
            }

            .section-header h2 {
                font-size: 32px;
            }
        }
    </style>
</head>
<body>
    <!-- 粒子背景 -->
    <div id="particles-js"></div>

    <!-- 导航栏 -->
    <header>
        <div class="logo">
            <div class="logo-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
            </div>
            <h1>NEXUS</h1>
        </div>

        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">解决方案</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>

        <button class="btn btn-secondary">登录</button>
    </header>

    <!-- 英雄区域 -->
    <section class="hero">
        <div class="hero-content">
            <h2>未来科技 · 今日呈现</h2>
            <h1>构建下一代数字体验平台</h1>
            <p>NEXUS平台融合人工智能、量子计算与区块链技术，为企业提供前所未有的数字化解决方案，引领行业变革。</p>
            <div class="hero-buttons">
                <button class="btn btn-primary">免费试用</button>
                <button class="btn btn-secondary">了解更多</button>
            </div>
        </div>

        <img src="https://via.placeholder.com/800x600/0a0e17/00f7ff?text=Holographic+UI" alt="科技界面展示" class="hero-image">
    </section>

    <!-- 特性部分 -->
    <section class="features">
        <div class="section-header">
            <h2>核心特性</h2>
            <p>NEXUS平台整合最前沿技术，为您提供全方位的数字化解决方案</p>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                    </svg>
                </div>
                <h3>量子计算</h3>
                <p>利用量子比特的并行计算能力，解决传统计算机无法处理的复杂问题，加速研发与创新进程。</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                    </svg>
                </div>
                <h3>人工智能</h3>
                <p>基于深度学习的自适应算法，持续优化业务流程，提供智能决策支持与预测分析。</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                </div>
                <h3>区块链安全</h3>
                <p>分布式账本技术确保数据不可篡改，智能合约自动化执行，构建可信的数字经济基础设施。</p>
            </div>
        </div>
    </section>

    <!-- 数据展示 -->
    <section class="stats">
        <div class="stats-container">
            <div class="stat-item">
                <div class="stat-number">150+</div>
                <div class="stat-label">全球客户</div>
            </div>

            <div class="stat-item">
                <div class="stat-number">99.99%</div>
                <div class="stat-label">系统可用性</div>
            </div>

            <div class="stat-item">
                <div class="stat-number">10x</div>
                <div class="stat-label">性能提升</div>
            </div>

            <div class="stat-item">
                <div class="stat-number">24/7</div>
                <div class="stat-label">技术支持</div>
            </div>
        </div>
    </section>

    <!-- CTA部分 -->
    <section class="cta">
        <h2>准备好开启未来之旅了吗?</h2>
        <p>加入全球领先企业的行列，体验NEXUS平台带来的变革性力量。我们的专家团队将为您提供全程支持。</p>
        <button class="btn btn-primary">立即咨询</button>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3>NEXUS</h3>
                <p>引领技术创新，构建数字未来。我们致力于为企业提供最前沿的科技解决方案。</p>
                <div class="social-links">
                    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
                    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a>
                    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a>
                </div>
            </div>

            <div class="footer-column">
                <h3>产品</h3>
                <ul class="footer-links">
                    <li><a href="#">量子计算平台</a></li>
                    <li><a href="#">AI解决方案</a></li>
                    <li><a href="#">区块链服务</a></li>
                    <li><a href="#">数据分析</a></li>
                    <li><a href="#">云基础设施</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>资源</h3>
                <ul class="footer-links">
                    <li><a href="#">文档中心</a></li>
                    <li><a href="#">API参考</a></li>
                    <li><a href="#">开发者社区</a></li>
                    <li><a href="#">白皮书</a></li>
                    <li><a href="#">案例研究</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>公司</h3>
                <ul class="footer-links">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">职业机会</a></li>
                    <li><a href="#">新闻中心</a></li>
                    <li><a href="#">合作伙伴</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <p>&copy; 2023 NEXUS Technologies. 保留所有权利。</p>
        </div>
    </footer>

    <!-- 粒子JS库 -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

    <script>
        // 初始化粒子背景
        particlesJS('particles-js', {
            "particles": {
                "number": {
                    "value": 80,
                    "density": {
                        "enable": true,
                        "value_area": 800
                    }
                },
                "color": {
                    "value": "#00f7ff"
                },
                "shape": {
                    "type": "circle",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    }
                },
                "opacity": {
                    "value": 0.5,
                    "random": true,
                    "anim": {
                        "enable": true,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": 3,
                    "random": true,
                    "anim": {
                        "enable": true,
                        "speed": 2,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": true,
                    "distance": 150,
                    "color": "#00f7ff",
                    "opacity": 0.2,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 1,
                    "direction": "none",
                    "random": true,
                    "straight": false,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                        "enable": true,
                        "rotateX": 600,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": true,
                        "mode": "grab"
                    },
                    "onclick": {
                        "enable": true,
                        "mode": "push"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 140,
                        "line_linked": {
                            "opacity": 0.5
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 40,
                        "duration": 2,
                        "opacity": 8,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200,
                        "duration": 0.4
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        });

        // 滚动动画
        document.addEventListener('DOMContentLoaded', function() {
            const featureCards = document.querySelectorAll('.feature-card');

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, { threshold: 0.1 });

            featureCards.forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'all 0.6s ease-out';
                observer.observe(card);
            });

            // 为统计数字添加动画
            const statNumbers = document.querySelectorAll('.stat-number');
            statNumbers.forEach(number => {
                const target = +number.textContent.replace(/[^0-9.]/g, '');
                const suffix = number.textContent.replace(/[0-9.]/g, '');
                let count = 0;
                const duration = 2000;
                const increment = target / (duration / 16);

                const updateCount = () => {
                    count += increment;
                    if (count < target) {
                        number.textContent = Math.floor(count) + suffix;
                        requestAnimationFrame(updateCount);
                    } else {
                        number.textContent = target + suffix;
                    }
                };

                const statObserver = new IntersectionObserver((entries) => {
                    if (entries[0].isIntersecting) {
                        updateCount();
                        statObserver.unobserve(number);
                    }
                });

                statObserver.observe(number);
            });
        });
    </script>
</body>
</html>